<template>
  <div class="full box_1" ref="home_box">
    <div class="relative">
      <div class="header_bgi w_full h_80 lh_80 bgs_full relative">
        <div class="w_20_p h_30 absolute_center title_bgi"></div>
      </div>

      <div class="select_muhu absolute top_center left_20">
        <el-select v-model="muHuId" placeholder="请选择牧户">
          <el-option
            v-for="(item, index) in muHuList" :key="index"
            :label="item.nickName"
            :value="item.id"
            @click.native="selectMuhu(item)">
          </el-option>
        </el-select>
      </div>

      <!-- 天气 -->
      <div class="weather absolute top_0 right_30"><AmapWeather /></div>

      <!-- 菜单 -->
      <div 
        class="w_100 text_center sub_color cursor bgc_058694 border_radius_5 color_fff absolute bottom_0 right_0"
        @click="back()">返回首页
      </div>
    </div>

    <!-- <div class="mu_hu_box absolute left_center z_999">
      <mu-hu-list @selectMuhu="selectMuhu" />
    </div> -->

    <div class="w_full h_full-80 flex_row_between">
      <!-- 1 -->
      <div class="w_25_p h_full flex_column_around">
        <!-- 饲料统计、饲料消耗 -->
        <div class="w_full h_40_p p_5">
          <div class="full chart_box relative">
            <div class="w_full h_40_p">
              <div class="chart_title">饲料统计</div>

              <div class="w_full h_full-30 ph_10">
                <div class="w_full flex_row_around fw_bold fs_15">
                  <div class="w_30_p text_left color_6b7079">名称</div>
                  <div class="w_30_p text_center color_6b7079">剩余（KG）</div>
                  <div class="w_30_p text_right color_6b7079">预计天数</div>
                </div>

                <div class="w_full flex_row_around ">
                  <div class="w_30_p text_left color_6b7079">精饲料</div>
                  <div class="w_30_p text_center color_eee">800</div>
                  <div class="w_30_p text_right color_eee">64</div>
                </div>

                <div class="w_full flex_row_around">
                  <div class="w_30_p text_left color_6b7079">干草</div>
                  <div class="w_30_p text_center color_eee">5</div>
                  <div class="w_30_p text_right color_eee">67</div>
                </div>

                <div class="w_full flex_row_around">
                  <div class="w_30_p text_left color_6b7079">青储</div>
                  <div class="w_30_p text_center color_eee">15</div>
                  <div class="w_30_p text_right color_eee">97</div>
                </div>
              </div>
            </div>

            <div class="w_90_p m_0_auto border_b_0_5_s_5f6163"></div>
            
            <div class="w_full h_60_p">
              <div class="chart_title">饲料消耗</div>

              <div class="w_full h_full-60">
                <line-chart class="full" :value="lineData" />
              </div>

              <div class="w_full flex_row_between ph_10 fs_14">
                <div class="flex_row_start color_fff border_radius_7 bgc_141820">
                  <div class="ph_10 flex_center bgc_CCB7A6 color_000 border_radius_7">全部</div>
                  <div class="ph_10 color_6b7079">精饲料</div>
                  <div class="ph_10 color_6b7079">干草</div>
                  <div class="ph_10 color_6b7079">清储</div>
                </div>

                <div class="flex_row_start color_fff border_radius_7 bgc_141820">
                  <div class="ph_10 flex_center color_6b7079">年</div>
                  <div class="ph_10 color_6b7079">月</div>
                  <div class="ph_10 bgc_CCB7A6 color_000 border_radius_7">天</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 碳砖肥 -->
        <div class="w_full h_25_p p_5">
          <div class="chart_box full">
            <div class="chart_title">碳砖肥</div>

            <div class="w_full h_full-30">
              <zhu-zhuang-tu :value="data6" />
            </div>
          </div>
        </div>

        <!-- 干湿分离 -->
        <div class="w_full h_35_p p_5">
          <div class="chart_box full">
            <div class="chart_title">干湿分离</div>

            <div class="w_full h_full-30">
              <zhu-zhuang-tu :value="data6" />
            </div>
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="w_50_p h_full flex_column_around">
        <div class="w_full h_65_p p_5">
          <div class="chart_box full relative">
            <div class="video_box full m_0_auto">
              <play-video />
            </div>
          </div>
        </div>
        
        <div class="w_full h_35_p flex_row_between ph_5">
          <div class="w_33_p pv_5">
            <div class="full chart_box">
              <div class="chart_title">自动饲喂</div>

              <div class="w_full h_full-30">
                <div class="w_full flex_row_center">
                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">传送带</div>
                        <div class="w_50_p text_right">左</div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>

                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">传送带</div>
                        <div class="w_50_p text_right">右</div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="w_full flex_row_center">
                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">搅拌机</div>
                        <div class="w_50_p text_right"></div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>

                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">粉碎机</div>
                        <div class="w_50_p text_right"></div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w_33_p p_5">
            <div class="full chart_box">
              <div class="chart_title">自动饮水</div>

              <div class="w_full h_full-30">
                <div class="w_full flex_row_center">
                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">恒温水</div>
                        <div class="w_50_p text_right"></div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>

                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">水泵循环</div>
                        <div class="w_50_p text_right"></div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w_33_p pv_5">
            <div class="full chart_box">
              <div class="chart_title">自动清理</div>

              <div class="w_full h_full-30">
                <div class="w_full flex_row_center">
                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">自动清粪</div>
                        <div class="w_50_p text_right"></div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>

                  <div class="w_50_p h_100 p_3">
                    <div class="full bgc_3D4454 border_radius_10 p_10">
                      <div class="w_full flex_row_between color_eee fs_14">
                        <div class="w_50_p text_left">自动消杀</div>
                        <div class="w_50_p text_right"></div>
                      </div>

                      <div class="w_full h_full-30 relative">
                        <div class="w_100 h_30 text_center absolute_center color_fff">开关</div> 
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_25_p h_full p_5">
        <div class="full chart_box">
          <div class="w_full h_40 lh_40 border_b_1_s_ccc flex_row_around">
            <div class="w_20_p text_center color_bdaa9c">全部</div>
            <div class="w_20_p text_center color_bdaa9c">母牛</div>
            <div class="w_20_p text_center color_bdaa9c">种牛</div>
            <div class="w_20_p text_center color_bdaa9c">犊牛</div>
            <div class="w_20_p text_center color_bdaa9c">公牛</div>
          </div>

          <div class="w_full h_full-40 p_5 scroll_box overflow_y_auto">
            <div 
              class="w_full bgc_323948 border_radius_5 mt_5 p_5" 
              v-for="(item, index) in 6" :key="index"
            >
              <div class="w_full flex_row_around">
                <div class="w_160 h_160">
                  <img class="full response_img" :src="def_cattle_img" alt="">
                </div>

                <div class="w_full-160 flex_column_between p_5">
                  <div class="w_full flex_row_between">
                    <div class="color_fff">xxxxxxxxxxxx</div>
                    <div class="">
                      <div class="ph_7 border_1_s_bdaa9c border_radius_5 color_bdaa9c">西门塔尔</div>
                    </div>
                  </div>

                  <div class="w_full flex_row_between">
                    <div class="color_6b7079">年龄</div>
                    <div class="color_eee">3岁</div>
                  </div>

                  <div class="w_full flex_row_between">
                    <div class="color_6b7079">体重</div>
                    <div class="color_eee">245kg</div>
                  </div>

                  <div class="w_full flex_row_between">
                    <div class="color_6b7079">疫苗接种</div>
                    <div class="color_eee">3</div>
                  </div>

                  <div class="w_full flex_row_between">
                    <div class="color_6b7079">配种次数</div>
                    <div class="color_eee">3</div>
                  </div>
                </div>
              </div>

              <div class="w_full h_40 lh_40 flex_row_around">
                <div class="w_25_p text_center color_bdaa9c">成长记录</div>
                <div class="w_25_p text_center color_bdaa9c">防疫记录</div>
                <div class="w_25_p text_center color_bdaa9c">育种记录</div>
                <div class="w_25_p text_center color_bdaa9c">交易记录</div>
              </div>
            </div>
          </div>
        </div>

            <!-- <si-wei-kai-guan />
            <yin-shui-kai-guan />
            <xiao-sha-kai-guan />
            <qing-fen-kai-guan /> -->

        <div ></div>
          
      </div>
    </div>
  </div>
</template>

<script>
  import { getMuHuList } from '@/config/mu-hu-request';

  import AmapWeather from '@/components/weather/AmapWeather.vue';
  import BingTu from './charts/bing-tu.vue'
  import LineChart from './charts/line-chart.vue'
  import KongXinBingTu from './charts/kong-xin-bing-tu.vue'
  import ZhuZhuangTu from './charts/zhu-zhuang-tu.vue'
  import MuHuList from './mu-hu-list.vue'
  import PlayVideo from './play-video.vue'
  import YangZhiDangAn from './yang-zhi-dang-an.vue'
  import SiWeiKaiGuan from './si-wei-kai-guan.vue'
  import YinShuiKaiGuan from './yin-shui-kai-guan.vue'
  import XiaoShaKaiGuan from './yin-shui-kai-guan.vue'
  import QingFenKaiGuan from './xiao-sha-kai-guan.vue'

  export default {
    name: 'DemonstrationMakido',
    components: { AmapWeather,
      BingTu, LineChart, KongXinBingTu, ZhuZhuangTu, MuHuList, PlayVideo, YangZhiDangAn, SiWeiKaiGuan, YinShuiKaiGuan, XiaoShaKaiGuan, QingFenKaiGuan },
    data() {
      return {
        qingFenImg: require('@/assets/images/shi-fan-dian/qing-fen.png'),
        def_cattle_img: require('@/assets/images//ba-lin-you-qi/xiao-niu-def.svg'),
        data1: {},
        data2: {},
        data3: {},
        data4: {},
        data5: {},
        data6: {},

        si_liao: {
          jing_si_liao: 800,
          gan_cao: 5,
          qing_chu: 10
        },

        cun_lan: [
          { name: '西门塔尔牛', val: 154 },
          { name: '母牛', val: 46 },
          { name: '短角牛', val: 23 },
          { name: '种牛', val: 24 },
          { name: '犊牛', val: 24 }
        ],

        lineData: {},

        muHuId: '',
        muHuList: [],
        
        paramsVal: ''
      }
    },
    mounted() {
      this.getMuHuList()

      setTimeout(() => {
        this.initChart()
      }, 100)

      this.$bus.$on('clickUserName', id => {
        // id: 8 : 奥特根巴特尔
        // id: 9 : 斯琴巴特尔
        // id: 10 : 孟和那顺
        // id: 15 : 达日夫

        if (id == 8) {
          this.data1 = {
            title: '',
            unit: '',
            data: [
              {"name": "青储", "value": 50, "unit": ''},
              {"name": "干草", "value": 20, "unit": ''},
              {"name": "精饲料", "value": 30, "unit": ''}
            ]
          }

          this.data2 = {
            x: [14, , 15, 16, 17],
            y: [100, 130, 140, 150, 160]
          }

          this.data2 = {...this.data2}

          this.cun_lan = [
            { name: '和牛', val: 154 },
            { name: '母牛', val: 46 },
            { name: '短角牛', val: 23 },
            { name: '种牛', val: 24 },
            { name: '犊牛', val: 24 }
          ]
        }

        console.log('id : ', id);
      })
    },
    methods: {
      initChart() {
        this.data1 = {
          title: '',
          unit: '',
          data: [
            {"name": "青储", "value": 50, "unit": ''},
            {"name": "干草", "value": 20, "unit": ''},
            {"name": "精饲料", "value": 30, "unit": ''}
          ]
        }

        this.lineData = {
          unit: 'KG',
          x: ['3-28', '3-29', '3-30', '3-31', '4-1'],
          y: [100, 130, 140, 150, 160]
        }

        this.data2 = {
          x: [1, 2, 3, 4, 5],
          y: [100, 130, 140, 150, 160]
        }

        this.data3 = {
          title: '',
          unit: '',
          data: [
            {"name": "", "value": 43, "unit": ''},
            {"name": "", "value": 54, "unit": ''},
            {"name": "", "value": 54, "unit": ''},
          ]
        }

        this.data4 = {
          title: '',
          unit: '',
          data: [
            {"name": "", "value": 12, "unit": ''},
            {"name": "", "value": 54, "unit": ''},
            {"name": "", "value": 87, "unit": ''},
          ]
        }

        this.data5 = {
          title: '',
          unit: '',
          data: [
            {"name": "", "value": 63, "unit": ''},
            {"name": "", "value": 14, "unit": ''},
            {"name": "", "value": 24, "unit": ''},
          ]
        }

        this.data6 = {
          yName: '',
          x: ['一季度', '二季度', '三季度', '四季度'],
          y: [18, 39, 12, 43]
        }
      },

      // 获取牧户 List
      async getMuHuList() {
        let res = await getMuHuList();

        if (res.code == 200) {
          for (let i in res.data) {
            let arr = [8, 9, 10, 15, 66, 67, 68, 69]
            if (arr.includes(res.data[i].id)) {
              this.muHuList.push(res.data[i])
            }
          }

          let params = this.$route.params.val || ''
          console.log('参数 : ', params);
          this.paramsVal = params

          let index = 0
          let id = 0

          if (params !== '全部') {
            this.showAll = true
            if (params == '牧户1') {
              index = 0
              id = 8
            } else if (params == '牧户2') {
              index = 1
              id = 9
            } else if (params == '牧户3') {
              index = 2
              id = 10
            } else if (params == '牧户4') {
              index = 3
              id = 15
            }
            this.$bus.$emit('clickUserName', id)
            this.$bus.$emit('sendVideoList', this.muhuList[index].monitors)

          } else {
            setTimeout(() => {
              this.activeMuHuIndex = 0
              // 发送 user_id
              this.$bus.$emit('clickUserName', this.muhuList[0].id)

              // 向 Video.vue 发送 监控 list
              this.$bus.$emit('sendVideoList', this.muhuList[0].monitors)
            }, 500)
          }
        } 
      },

      // 选择牧户后 更新 数据
      selectMuhu(item) {
        // 发送 user_id
        this.$bus.$emit('clickUserName', item.id)

        // 向 Video.vue 发送 监控 list
        this.$bus.$emit('sendVideoList', item.monitors)
      },

      back() {
        this.$router.back()
      }
    }
  }
</script>

<style lang="less" scoped>
  .chart_box {
    background-color: #202836;
    border-radius: 5px;
    padding: 5px
  }

  .chart_title { width: 100%; height: 30; line-height: 30px; color: #bdaa9c; font-size: 16px; font-weight: bold; background: none; padding-left: 10px; }
  .shi_fan_box {
    width: 100vw;
    height: 100vh;
    background-image: url('../../../assets/images/shi-fan-dian/bgi.png');
    background-size: 100% 100%;
  }
  .left_box1 {
    background-image: url('../../../assets/images/shi-fan-dian/left1.png');
    background-size: 100% 100%;
  }
  .left_box2 {
    background-image: url('../../../assets/images/shi-fan-dian/left2.png');
    background-size: 100% 100%;
  }
  .left_box3 {
    background-image: url('../../../assets/images/shi-fan-dian/left3.png');
    background-size: 100% 100%;
  }
  .left_box4 {
    background-image: url('../../../assets/images/shi-fan-dian/left4.png');
    background-size: 100% 100%;
  }
  .center_1 {
    background-image: url('../../../assets/images/shi-fan-dian/center1.png');
    background-size: 100% 100%;
  }
  .center_2 {
    background-image: url('../../../assets/images/shi-fan-dian/center3.png');
    background-size: 100% 100%;
  }
  .right_box1 {
    background-image: url('../../../assets/images/shi-fan-dian/right1.png');
    background-size: 100% 100%;
  }
  .right_box2 {
    background-image: url('../../../assets/images/shi-fan-dian/right2.png');
    background-size: 100% 100%;
  }
  .right_box3 {
    background-image: url('../../../assets/images/shi-fan-dian/right3.png');
    background-size: 100% 100%;
  }
  .right_box4 {
    background-image: url('../../../assets/images/shi-fan-dian/right4.png');
    background-size: 100% 100%;
  }

  // 标题
  .box_title { font-size: 20px; font-weight: bold; color: rgb(255, 200, 0); position: absolute; }
</style>

<style lang="less">
   .select_muhu {
    .el-select-dropdown {
      border: none;
      background-color: #131823;
      border: 2px solid #CCB7A6;
    }
    /* 输入框 */
    .el-input__inner{
      color: #CCB7A6 !important;
      border: 2px solid #CCB7A6;
      background-color: #131823;
      border-radius: 10px;
    }
    /* 聚焦时的样式 */
    .el-select .el-input.is-focus .el-input__inner{
      border: 2px solid #CCB7A6;
      background-color: #131823;
      color:#CCB7A6;
    }
    /* 下拉框选中 */
    .el-select-dropdown__item{
      color: #CCB7A6;
      border: 2px solid #CCB7A6 !important;
      background-color: #131823;
    }
    /* 鼠标经过下拉框 */
    .el-select-dropdown__item.hover, 
    .el-select-dropdown__item:hover {
      color:#CCB7A6;
      background-color: #131823;
    }
  }
</style>